//window.onload 的意思就是等页面加载完成触发 比如公共区域的用户名 登录注册的数据等等
window.onload = async function () {
  try {
    const res = await axios({
      url: '/dashboard',
      //在公共区域请求头那配置了token 所以这里不用写
    })
    console.log(res.data)
    const { overview, year, salaryData, groupData, provinceData } = res.data
   // console.log(provinceData);
    //document.querySelector('[name=salary]').innerHTML= overview.salary
    for (let k in overview) {
      //console.log(k);
      document.querySelector(`[name=${k}]`).innerHTML = overview[k]
    }

    //薪资走势
    //因为有两个图标 所以要用立即执行函数分隔开防止变量污染
    //立即执行函数可以避免函数内的变量暴露在全局环境下,避免全局变量的污染
    !(function () {
      // ③ 初始化echarts实例
      var myChart = echarts.init(document.getElementById('line'))
      var option = {
        title: {
          text: '2021全学科薪资走势',
          top: '2%',
          left: '3%',
        },
        xAxis: {
          type: 'category',
          data: year.map((item) => item.month),
          axisLine: {
            lineStyle: {
              type: 'dashed',
              color: '#d3d3d3',
            },
          },
          axisLabel: {
            color: '#000',
          },
        },
        yAxis: {
          type: 'value',
          splitLine: {
            lineStyle: {
              color: '#53bdf9',
              type: 'dashed',
            },
          },
        },
        //提示横纵轴数据
        tooltip: {
          show: true,
        },
        series: [
          {
            data: year.map((item) => item.salary),
            type: 'line',
            smooth: true,
            symbolSize: 10,
            lineStyle: {
              width: 8,
              color: '#6790f7',
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: '#cee3fc', // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#fff', // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
          },
        ],
      }
      myChart.setOption(option)
    })()
    //薪资分布
    !(function () {
      // ③ 初始化echarts实例
      var myChart = echarts.init(document.getElementById('salary'))
      var option = {
        title: {
          text: '班级薪资分布',
          top: '2%',
          left: '3%',
        },
        tooltip: {
          trigger: 'item',
        },
        legend: {
          bottom: '5%',
          left: 'center',
        },
        color: ['#f1a545', '#5f98f7', '#6accfa', '#69cf9e'],
        series: [
          {
            name: '薪资分布',
            type: 'pie',
            radius: ['55%', '75%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 15,
              borderColor: '#fff',
              borderWidth: 2,
            },
            label: {
              show: false,
              position: 'center',
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold',
              },
            },
            labelLine: {
              show: false,
            },
            data: salaryData.map((item) => {
              return {
                value: item.g_count + item.b_count,
                name: item.label,
              }
            }),
            // data: [
            //   { value: 1048, name: 'harry' },
            //   { value: 735, name: 'Direct' },
            //   { value: 580, name: 'Email' },
            //   { value: 484, name: 'Union Ads' }
            // ]
          },
        ],
      }
      myChart.setOption(option)
    })()


    //班级每组薪资
    !(function () {
      // ③ 初始化echarts实例
      var myChart = echarts.init(document.getElementById('lines'))
      var option = {
        xAxis: {
          type: 'category',
          //groupData是一个对象 不少数组 第一项key 是1
          data: groupData[1].map(item=>item.name),
          axisLine: {
            lineStyle: {
              type: 'dashed',
              color: '#d4d4d6',
            },
          },
        },
        tooltip: {
          show: true,
        },
        yAxis: {
          type: 'value',
          splitLine: {
            lineStyle: {
              type: 'dashed',
            },
          },
        },
        color: [
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#6ccfa1', // 0% 处的颜色
              },
              {
                offset: 1,
                color: '#d5f2e7', // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#61a1e7', // 0% 处的颜色
              },
              {
                offset: 1,
                color: '#d8e8f8', // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        ],
        series: [
          {
            data: groupData[1].map(item=>item.hope_salary),
            type: 'bar',
          },
          {
            data: groupData[1].map(item=>item.salary),
            type: 'bar',
          },
        ],
      }
      myChart.setOption(option)
      //排他 高亮  获取所有标签 伪数组
      const btns = document.querySelectorAll('#btns .btn-xs ')
      btns.forEach(item => {
        item.addEventListener('click', function () {
          //先获取有这个类名的标签 再把这个类名移除
          document.querySelector('.btn-blue').classList.remove('btn-blue')
          //被点击的添加类名
          this.classList.add('btn-blue')
          //组别为1-8 刚好可以利用对象的key为1-8 来充当索引 
          const index = this.innerHTML.trim()
          option.xAxis.data = groupData[index].map(item => item.name)
          option.series[0] = groupData[index].map(item => item.hope_salary)
          option.series[1] = groupData[index].map(item => item.salary)
          myChart.setOption(option)
        })
         })
    })()


    //班级男女薪资分布
    !(function () {
      var myChart = echarts.init(document.getElementById('gender'))
      var option = {
        title: [
          {
            text: '男女薪资分布',
            // left: 'left'
            top: '2%',
            left: '4%'
          },
          {
            text: '男生',
            left: '50%',
            top: '44%',
            textAlign: 'center',
          },
          {
            text: '女生',
            left: '50%',
            top: '90%',
            textAlign: 'center',
          }
        ],
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            name: '男生',
            type: 'pie',
            radius: ['25%', '35%'],
            center: ['50%', '25%'],
            // 这里要求的数据是对象  函数省略花括号返回对象要用小括号包裹一下
            data:salaryData.map(item =>({value: item.g_count, name:item.label})),
            // data: [
            //   { value: 1048, name: 'Search Engine' },
            //   { value: 735, name: 'Direct' },
            //   { value: 580, name: 'Email' },
            //   { value: 484, name: 'Union Ads' },
            //   { value: 300, name: 'Video Ads' }
            // ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          },
          {
            name: '女生',
            type: 'pie',
            radius: ['25%', '35%'],
            center: ['50%', '70%'],
            data:salaryData.map(item =>({value: item.b_count, name:item.label})),
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      myChart.setOption(option)
    })()
    
    //籍贯地图分布
    !(function () {
      var myChart = echarts.init(document.getElementById('map'))
      const dataList = [
        { name: '南海诸岛', value: 0 },
        { name: '北京', value: 0 },
        { name: '天津', value: 0 },
        { name: '上海', value: 0 },
        { name: '重庆', value: 0 },
        { name: '河北', value: 0 },
        { name: '河南', value: 0 },
        { name: '云南', value: 0 },
        { name: '辽宁', value: 0 },
        { name: '黑龙江', value: 0 },
        { name: '湖南', value: 0 },
        { name: '安徽', value: 0 },
        { name: '山东', value: 0 },
        { name: '新疆', value: 0 },
        { name: '江苏', value: 0 },
        { name: '浙江', value: 0 },
        { name: '江西', value: 0 },
        { name: '湖北', value: 0 },
        { name: '广西', value: 0 },
        { name: '甘肃', value: 0 },
        { name: '山西', value: 0 },
        { name: '内蒙古', value: 0 },
        { name: '陕西', value: 0 },
        { name: '吉林', value: 0 },
        { name: '福建', value: 0 },
        { name: '贵州', value: 0 },
        { name: '广东', value: 0 },
        { name: '青海', value: 0 },
        { name: '西藏', value: 0 },
        { name: '四川', value: 0 },
        { name: '宁夏', value: 0 },
        { name: '海南', value: 0 },
        { name: '台湾', value: 0 },
        { name: '香港', value: 0 },
        { name: '澳门', value: 0 },
      ]
      provinceData.forEach(item => {
        const findObj = dataList.find(
          v => {
            return item.name.startsWith(v.name)
          })
        //判断接口里是否有这一项  有的话让这一项的value等于接口返回的value
          item &&  (findObj.value = item.value)
      })

      let option = {
        title: {
          text: '籍贯分布',
          top: 10,
          left: 10,
          textStyle: {
            fontSize: 16,
          },
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c} 位学员',
          borderColor: 'transparent',
          backgroundColor: 'rgba(0,0,0,0.5)',
          textStyle: {
            color: '#fff',
          },
        },
        visualMap: {
          min: 0,
          max: 6,
          left: 'left',
          bottom: '20',
          text: ['6', '0'],
          inRange: {
            color: ['#ffffff', '#0075F0'],
          },
          show: true,
          left: 40,
        },
        geo: {
          map: 'china',
          roam: false,
          zoom: 1.0,
          label: {
            normal: {
              show: true,
              fontSize: '10',
              color: 'rgba(0,0,0,0.7)',
            },
          },
          itemStyle: {
            normal: {
              borderColor: 'rgba(0, 0, 0, 0.2)',
              color: '#e0ffff',
            },
            emphasis: {
              areaColor: '#34D39A',
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 20,
              borderWidth: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
          },
        },
        series: [
          {
            name: '籍贯分布',
            type: 'map',
            geoIndex: 0,
            data: dataList,
          },
        ],
      }
      myChart.setOption(option)
    })()
  } catch (error) {
    console.log(error)
  }
}
